<template>
  <div class="my-input">
    <el-input
      v-model="inputValue"
      v-bind="$attrs"
      @blur="handleBlur"
    />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  modelValue: string
}

interface Emits {
  'update:modelValue': [value: string]
  'blur': [value: string]
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: ''
})

const emit = defineEmits<Emits>()

// 使用 computed 处理双向绑定
const inputValue = computed({
  get() {
    return props.modelValue
  },
  set(value: string) {
    console.log('输入值变化:', value)
    emit('update:modelValue', value)
  }
})

// 失焦事件处理
const handleBlur = () => {
  console.log('输入框失焦')
  emit('blur', props.modelValue)
}
</script>

<style lang="scss" scoped>
.my-input {
  width: 100%;
}
</style>
